import React from 'react';
import { Glyphicon } from 'react-bootstrap';
import DatePicker, { CalendarContainer } from './react-datepicker';
import './Datepicker.less';

function MyContainer({ className, children }) {
  return (
    <CalendarContainer className={className}>
      <div style={{ position: 'relative' }}>
        {children}
      </div>
    </CalendarContainer>
  );
}

/**
 * 个性化定制天
 * @method DayWrap
 * created by wjxu on 2018-05-29T16:01:30+0800
 * modify by wjxu on 2018-05-29T16:01:30+0800
 * @param  {string} day     当前日期的号值，如 5 ，即 5 号
 * @param  {Moment} dayDate 当前日期的 Moment 对象
 */
function DayWrap(formatDayData = {}, day, dayDate) {
  const d = dayDate.format('YYYY-MM-DD');
  const list = formatDayData[d];
  return (
    <div className="day-wrap">
      <span className="day-wrap-everday">{day}</span>
      {list && list.map((e) => {
        const color = {
          ok: '#22B14C',
          warn: '#FF7F27',
          error: '#ED1C24',
        }[e.status];
        return (
          <span key={e.name} style={{ color }} className="day-wrap-icons" >
            <Glyphicon glyph={e.icon} title={e.name} />
          </span>
        );
      })}
    </div>
  );
}

const BigDatePicker = ({ formatDayData, ...restProps }) => (
  <div className="big-date-picker">
    <DatePicker
      calendarContainer={MyContainer}
      dayWrap={(day, dayDate) => DayWrap(formatDayData, day, dayDate)}
      {...restProps}
    />
  </div>
);

export default BigDatePicker;
